<template>
    <div class="diancai">
        <div class="jdt">
        <div><span class="iconfont icon-canzhuoguanli"></span><br />
             <span>选择餐桌</span>
        </div>
           <div class="jd"></div>
        <div><span class="iconfont icon-food-add"></span><br />
            <span>开始点餐</span>
        </div>
            <div class="jd"></div>
        <div><span class="iconfont icon-huiyuanguanli"></span><br />
            <span>完成点餐</span>
        </div>
        </div>
        <Table v-if="ISshowtable"  @startManu="canNum" v-for="item in tableNum" :tableData="item"></Table>
        <ShowMenu v-if="!ISshowtable" :tableId="tableId" @zhangshi="xiangshi"></ShowMenu>
    </div>
</template>

<script>
    import Table from  '../components/Table'
    import ShowMenu from  '../components/ShowMenu'
    import * as api from "../utils/api";
    export default {
        name: "Diancai",
        data(){
          return{
              tableNum:'',
              ISshowtable:true,
              tableId:'',
              tableAlldata:'' //点击桌子的所有数据
          }
        },
        components:{
            Table,
            ShowMenu
        },
        methods:{
            canNum(data){
                this.ISshowtable = !this.ISshowtable
                console.log(data)
                for (let i = 0; i <this.tableNum.length ; i++) {
                    if(this.tableNum[i].id===data){
                        this.tableAlldata={...this.tableNum[i]}
                        console.log(12345)
                        console.log(this.tableAlldata)
                    }
                }
                this.tableId=data
            },
            xiangshi(){
                this.ISshowtable = !this.ISshowtable
            }
        },
        created(){
            this.axios({
                url:api.GET_SELECTALLTABLE,
                method:'get',
            }).then(data=>{
                console.log(123)
                console.log(data)
                this.tableNum=data.data.data
            })
        }
    }
</script>

<style scoped lang="less">
        .jdt{
            padding:0 10%;
            width: 80%;
            /*border: 1px solid red;*/
            display: flex;
            justify-content:space-around;
            span{
                font-size: 1.5rem;
            }
            .jd{
                margin-top: 15px;
                height: 3px;
               background-color: #B0B0B0;
                width: 29rem;
            }
        }



</style>